<script setup lang="ts">
import AnimationDialog from '@/components/Dialog/AnimationDialog.vue'
import { useDialogStore } from '@/stores/dialog'

import { computed, ref, watch } from 'vue'
// import NewWord from '@/views/Word/Finance/FinanceWord.vue'
import NewWord from '@/views/World3D/World.vue'
// import ChinaMap from '@/views/Word/Supply/ChinaMap.vue'
import ChinaMap from '@/views/Maps/ChinaMap.vue'
import HeaderCom from '@/components/Layout/PageHeader/HeaderCom.vue'
import AllLeft from '@/components/PermissionsModule/FinanceAllLeft.vue'
import AllRight from '@/components/PermissionsModule/FinanceAllRight.vue'
import { mapStore } from '@/stores/worldMap'
import { roleStore } from '@/stores/role'
import TopCom from './layout/TopCom.vue'
import { storeToRefs } from 'pinia'
import FinancialRevenueFooter from '@/components/PermissionsModule/Finance/components/FinancialRevenueFooter.vue'
import FinanceGaugeFooter from '@/views/Finance/layout/FinanceGaugeFooter.vue'
import { headersStore } from '@/stores/apiHeader'

// 各区收入占比
import AreaIncomeRatio from '@/components/PermissionsModule/Finance/components/AreaIncomeRatio.vue'
// 全球（4月）收入额与利润率
import FinancialRevenueLeft from '@/components/Echart/flexGlobal/FinancialRevenueLeft.vue'
// 利润额前5名国家
import FinancialReport from '@/components/PermissionsModule/Finance/components/FinancialReport.vue'
// 亏损前5名国家
import LossTopTenCountries from '@/components/PermissionsModule/Finance/components/LossTopTenCountries.vue'

// 收入同环比增长情况
import IncomeGrowthRateMoM from '@/components/PermissionsModule/Finance/components/IncomeGrowthRateMoM.vue'
// 收入同比增长情况
import IncomeYoYIncrease from '@/components/PermissionsModule/Finance/components/IncomeYoYIncrease.vue'
// 收入环比增长情况
import IncomeHb from '@/components/PermissionsModule/Finance/components/IncomeHb.vue'
// 全球利润额同比增长情况
import GlobalProfitYearOnYearIncreaseTrend from '@/components/PermissionsModule/Finance/components/GlobalProfitYearOnYearIncreaseTrend.vue'
// 全球利润额环比增长情况
import GlobalProfitMomIncreaseTrend from '@/components/PermissionsModule/Finance/components/GlobalProfitMomIncreaseTrend.vue'
// 全球利润额趋势
import ProfitTrendGlobal from '@/components/PermissionsModule/Finance/components/ProfitTrendGlobal.vue'
// 利润额各区同比增涨额对比
import ComparisonOfYearOnYearIncreaseInProfitsByRegion from '@/components/PermissionsModule/Finance/components/ComparisonOfYearOnYearIncreaseInProfitsByRegion.vue'
// 利润额各区环比增涨额对比
import ComparisonOfQuarterlyIncreaseInProfitsByRegion from '@/components/PermissionsModule/Finance/components/ComparisonOfQuarterlyIncreaseInProfitsByRegion.vue'
import ComparisonOfYoY from '@/components/PermissionsModule/Finance/components/ComparisonOfYoY.vue'
import ProfitMarginsRegionMoMIncrease from '@/components/PermissionsModule/Finance/components/ProfitMarginsRegionMoMIncrease.vue'
// 全球利润率趋势
import ProfitTrendRate from '@/components/PermissionsModule/Finance/components/ProfitTrendRate.vue'

import GlobalYoYTrendYoY from '@/components/PermissionsModule/Finance/components/GlobalYoYTrendYoY.vue'
import GlobalMoMTrendMoM from '@/components/PermissionsModule/Finance/components/GlobalMoMTrendMoM.vue'

// 收入趋势
import RevenueTrend from '@/components/PermissionsModule/Finance/components/RevenueTrend.vue'

import ComparisonOfIncreaseInProfitsAndProfitMarginsByRegion from '@/components/PermissionsModule/Finance/components/ComparisonOfIncreaseInProfitsAndProfitMarginsByRegion.vue'
import ProfitsAndProfitMarginsRegionMoMIncreaseComparison from '@/components/PermissionsModule/Finance/components/ProfitsAndProfitMarginsRegionMoMIncreaseComparison.vue'
// 利润额与利润率
import GetIncomeVolumeRate from '@/components/PermissionsModule/Finance/components/GetIncomeVolumeRate.vue'
/************右边****************/
// 各区变动支出对比
import AreaExpenditureComparison from '@/components/PermissionsModule/Finance/components/AreaExpenditureComparison.vue'
// 全球重点变动支出对比
import KeyExpenditureComparison from '@/components/PermissionsModule/Finance/components/KeyExpenditureComparison.vue'
// 全球（4月）边际贡献额与边际贡献率
import FinancialRevenueRight from '@/components/Echart/flexGlobal/FinancialRevenueRight.vue'
// 全球（4月）边际贡献额与边际贡献率
import GetMarginalAmoutRate from '@/components/PermissionsModule/Finance/components/GetMarginalAmoutRate.vue'

// 全球边际贡献额趋势
import MarginalContributionTrend from '@/components/PermissionsModule/Finance/components/MarginalAmountRateTrend.vue'
// 全球边际贡献率趋势
import MarginalRateTrend from '@/components/PermissionsModule/Finance/components/MarginalRateTrend.vue'
// 边际贡献额同环比增长对比
import MarginalAmountGrow from '@/components/PermissionsModule/Finance/components/MarginalAmountGrow.vue'
//  边际贡献额环比增长对比
import GetMarginalAmountMOMGrow from '@/components/PermissionsModule/Finance/components/GetMarginalAmountMOMGrow.vue'
// 全球边际贡献额同比增长情况
import MarginalContributionGrowth from '@/components/PermissionsModule/Finance/components/MarginalContributionGrowth.vue'
/*** 支出模块 ***/
// 变动支出（成本）占比趋势
import VariableExpensesCost from '@/components/PermissionsModule/Finance/components/VariableExpensesCost.vue'
import VariableExpensesAgencyfee from '@/components/PermissionsModule/Finance/components/VariableExpensesAgencyfee.vue'
import VariableExpensesPromotion from '@/components/PermissionsModule/Finance/components/VariableExpensesPromotion.vue'
import VariableExpensesTax from '@/components/PermissionsModule/Finance/components/VariableExpensesTax.vue'
import VariableExpensesWages from '@/components/PermissionsModule/Finance/components/VariableExpensesWages.vue'
// 全球固定支出总额趋势
import FixedExpensesAmount from '@/components/PermissionsModule/Finance/components/FixedExpensesAmount.vue'
// （各区，各国）固定支出总额与占比 月
import TsotalSumAndRatio from '@/components/PermissionsModule/Finance/components/TsotalSumAndRatio.vue'
// 固定支出总额同比增长情况
import FixedExpensesAmountYOY from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountYOY.vue'
// 固定支出总额同比增长情况（各区年，各区月，各国年，各国月）
import FixedExpensesAmountYoyGrow from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountYoyGrow.vue'
// 固定支出总额环比增长对比（各区月，各国月）
import FixedExpensesAmountQoq from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountQoq.vue'
// （全球月，区域月，国家月）固定支出
import FixedExpenses from '@/components/PermissionsModule/Finance/components/FixedExpenses.vue'
// 固定支出总额同环比
import FixedExpensesAmountYoyQoq from '@/components/PermissionsModule/Finance/components/FixedExpensesAmountYoyQoq.vue'
// 费用支出信息 人工费
import ExpensesLaborCost from '@/components/PermissionsModule/Finance/components/ExpensesLaborCost.vue'
// 费用支出信息 租赁费
import ExpensesLeaseCost from '@/components/PermissionsModule/Finance/components/ExpensesLeaseCost.vue'
// 费用支出信息 咨询服务费
import ExpensesConsultingCost from '@/components/PermissionsModule/Finance/components/ExpensesConsultingCost.vue'
// 费用支出信息 公关费
import ExpensesPublicRelationsCost from '@/components/PermissionsModule/Finance/components/ExpensesPublicRelationsCost.vue'
// 费用支出信息 交通差旅费
import ExpensesTrafficCost from '@/components/PermissionsModule/Finance/components/ExpensesTrafficCost.vue'
// 对比支出信息 人工费
import ContrastExpensesLaborCost from '@/components/PermissionsModule/Finance/components/ContrastExpensesLaborCost.vue'
// 对比支出信息 租赁费
import ContrastExpensesLeaseCost from '@/components/PermissionsModule/Finance/components/ContrastExpensesLeaseCost.vue'
// 对比支出信息 咨询服务费
import ContrastExpensesConsultingCost from '@/components/PermissionsModule/Finance/components/ContrastExpensesConsultingCost.vue'
// 对比支出信息 公关费
import ContrastExpensesPublicRelationsCost from '@/components/PermissionsModule/Finance/components/ContrastExpensesPublicRelationsCost.vue'
// 对比支出信息 交通差旅费
import ContrastExpensesTrafficCost from '@/components/PermissionsModule/Finance/components/ContrastExpensesTrafficCost.vue'
//  全球变动支出（累计)
import CumulativeExpenseStart from '@/components/PermissionsModule/Finance/components/CumulativeExpenseStart.vue'
const useHeadersStore = headersStore()
const { restWorld, restChina } = storeToRefs(mapStore())
const rolesStore = roleStore()
const { financeLevel } = rolesStore
const worldMapStore = mapStore()
const toggleMap = ref(false) // 切换地图
toggleMap.value = worldMapStore.isChina
const key1 = ref('FinancialRevenueFooter')
const key2 = ref('FinanceGaugeFooter')

// 监听state
worldMapStore.$subscribe((mutation, state) => {
  toggleMap.value = state.isChina
})

const everyCodeFlag = ref('')
everyCodeFlag.value = useHeadersStore.every_code

/**
 * @description: 1 国家 2 区域 3 全球
 */
const newRole = ref(0)
newRole.value = financeLevel // 初始化面板权限

const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
dialogInfo.visible = false

// 监听state
rolesStore.$subscribe((mutation, state) => {
  newRole.value = state.supplyLevel
})

useHeadersStore.$subscribe((mutation, state) => {
  everyCodeFlag.value = state.every_code
})

const dialogCB = ref(null)
dialogStore.$subscribe((mutation, state) => {
  dialogCB.value.changeDialogVisible(dialogInfo.visible)
})

const dialogInfoCB = {
  title: '', // 标题
  style: 'cb', // 动画风格 左上：lt 左中：lm 左下：lb 右上：rt 右中：rm 右下：rb
  width: '60%', // 自定义宽度
}
</script>

<template>
  <Layout
    :boxClassName="'finance-box'"
    :footerClassName="newRole != 3 && everyCodeFlag != '' ? '' : 'bg-none'"
  >
    <template v-slot:header>
      <HeaderCom class-name="finance-header" />
    </template>
    <template v-slot:top><TopCom /></template>
    <template v-slot:left><AllLeft /></template>
    <template v-slot:main>
      <NewWord v-if="!toggleMap" />
      <ChinaMap v-if="toggleMap && !restChina" />
    </template>
    <template v-slot:right><AllRight /></template>
    <template v-slot:footer>
      <FinancialRevenueFooter v-if="everyCodeFlag == ''" :key="key1" />
      <FinanceGaugeFooter v-else :key="key2" />
    </template>
  </Layout>
  <AnimationDialog
    ref="dialogCB"
    :dialogInfo="dialogInfoCB"
    @close="dialogInfo.visible = false"
  >
    <div v-if="dialogInfo.visible">
      <!-- *********************** -->
      <!-- 收入趋势 -->
      <RevenueTrend v-if="dialogInfo.componentName == 'RevenueTrend'" />
      <!-- 全球（4月）收入额与利润率-->
      <FinancialRevenueLeft
        v-if="dialogInfo.componentName == 'FinancialRevenueLeft'"
      />
      <!-- 各区收入占比 -->

      <AreaIncomeRatio v-if="dialogInfo.componentName == 'AreaIncomeRatio'" />

      <FinancialReport v-if="dialogInfo.componentName == 'FinancialReport'" />
      <LossTopTenCountries
        v-if="dialogInfo.componentName == 'LossTopTenCountries'"
      />
      <!-- 库存金额(柱状图)-->
      <!-- <SthMoneyBar :level="newRole" /> -->
      <IncomeHb v-if="dialogInfo.componentName == 'IncomeHb'" />
      <IncomeGrowthRateMoM
        v-if="dialogInfo.componentName == 'IncomeGrowthRateMoM'"
      />
      <IncomeYoYIncrease
        v-if="dialogInfo.componentName == 'IncomeYoYIncrease'"
      />
      <!-- 库存金额(柱状图)-->
      <!-- <SthMoneyBar :level="newRole" /> -->
      <!-- 库存数量(柱状图)-->
      <!-- <FinanciaEchartBar v-if="newRole <= 3 && month !== '00'" /> -->

      <!-- // 利润额各区环比增涨额对比 -->
      <ComparisonOfYearOnYearIncreaseInProfitsByRegion
        v-if="
          dialogInfo.componentName ==
          'ComparisonOfYearOnYearIncreaseInProfitsByRegion'
        "
      />
      <!-- // 利润额各区同比增涨额对比 -->
      <ComparisonOfQuarterlyIncreaseInProfitsByRegion
        v-if="
          dialogInfo.componentName ==
          'ComparisonOfQuarterlyIncreaseInProfitsByRegion'
        "
      />
      <!-- 全球利润额趋势 -->
      <ProfitTrendGlobal
        v-if="dialogInfo.componentName == 'ProfitTrendGlobal'"
      />
      <!-- 全球利润率趋势 -->
      <ProfitTrendRate v-if="dialogInfo.componentName == 'ProfitTrendRate'" />
      <!-- 利润额同环比 -->
      <GlobalYoYTrendYoY
        v-if="dialogInfo.componentName == 'GlobalYoYTrendYoY'"
      />
      <GlobalMoMTrendMoM
        v-if="dialogInfo.componentName == 'GlobalMoMTrendMoM'"
      />
      <!--  利润额环比增长对比 -->

      <ProfitsAndProfitMarginsRegionMoMIncreaseComparison
        v-if="
          dialogInfo.componentName ==
          'ProfitsAndProfitMarginsRegionMoMIncreaseComparison'
        "
      />
      <!-- 利润额同比增长对比 -->

      <ComparisonOfIncreaseInProfitsAndProfitMarginsByRegion
        v-if="
          dialogInfo.componentName ==
          'ComparisonOfIncreaseInProfitsAndProfitMarginsByRegion'
        "
      />
      <!-- 利润额与利润率 -->
      <GetIncomeVolumeRate
        v-if="dialogInfo.componentName == 'GetIncomeVolumeRate'"
      />
      <!-- ************** -->
      <!-- 库存数量(柱状图)-->
      <FinancialRevenueRight
        v-if="dialogInfo.componentName == 'FinancialRevenueRight'"
      />
      <!-- 边际贡献额同环比增长对比 -->

      <MarginalAmountGrow
        v-if="dialogInfo.componentName == 'MarginalAmountGrow'"
      />

      <!-- 全球边际贡献额趋势 -->
      <MarginalContributionTrend
        v-if="dialogInfo.componentName == 'MarginalContributionTrend'"
      />
      <!-- 全球边际贡献率趋势 -->
      <MarginalRateTrend
        v-if="dialogInfo.componentName == 'MarginalRateTrend'"
      />
      <!-- 边际贡献额与边际贡献率 -->
      <GetMarginalAmoutRate
        v-if="dialogInfo.componentName == 'GetMarginalAmoutRate'"
      />
      <!-- 全球边际贡献额同比增长情况 -->
      <MarginalContributionGrowth
        v-if="dialogInfo.componentName == 'MarginalContributionGrowth'"
      />
      <!-- 边际贡献额环比增长对比 -->
      <GetMarginalAmountMOMGrow
        v-if="dialogInfo.componentName == 'GetMarginalAmountMOMGrow'"
      />
      <!-- 变动支出（成本）占比趋势 -->
      <VariableExpensesCost
        v-if="dialogInfo.componentName == 'VariableExpensesCost'"
      />
      <VariableExpensesWages
        v-if="dialogInfo.componentName == 'VariableExpensesWages'"
      />
      <VariableExpensesAgencyfee
        v-if="dialogInfo.componentName == 'VariableExpensesAgencyfee'"
      />
      <VariableExpensesTax
        v-if="dialogInfo.componentName == 'VariableExpensesTax'"
      />
      <VariableExpensesPromotion
        v-if="dialogInfo.componentName == 'VariableExpensesPromotion'"
      />
      <AreaExpenditureComparison
        v-if="dialogInfo.componentName == 'AreaExpenditureComparison'"
      />
      <KeyExpenditureComparison
        v-if="dialogInfo.componentName == 'KeyExpenditureComparison'"
      />
      <!-- 固定支出总额趋势对比 -->
      <FixedExpensesAmount
        v-if="dialogInfo.componentName == 'FixedExpensesAmount'"
      />

      <!-- 固定支出总额同比增长情况 -->
      <FixedExpensesAmountYOY
        v-if="dialogInfo.componentName == 'FixedExpensesAmountYOY'"
      />
      <!-- 费用支出信息 全球年 区域年  国家年-->
      <ExpensesLaborCost
        v-if="dialogInfo.componentName == 'ExpensesLaborCost'"
      />
      <ExpensesLeaseCost
        v-if="dialogInfo.componentName == 'ExpensesLeaseCost'"
      />
      <ExpensesConsultingCost
        v-if="dialogInfo.componentName == 'ExpensesConsultingCost'"
      />
      <ExpensesPublicRelationsCost
        v-if="dialogInfo.componentName == 'ExpensesPublicRelationsCost'"
      />
      <ExpensesTrafficCost
        v-if="dialogInfo.componentName == 'ExpensesTrafficCost'"
      />
      <!-- （全球月，区域月，国家月）固定支出 -->
      <FixedExpenses v-if="dialogInfo.componentName == 'FixedExpenses'" />
      <!-- 固定支出总额同环比 -->
      <FixedExpensesAmountYoyQoq
        v-if="dialogInfo.componentName == 'FixedExpensesAmountYoyQoq'"
      />
      <!-- （各区，各国）固定支出总额与占比 月 -->
      <TsotalSumAndRatio
        v-if="dialogInfo.componentName == 'TsotalSumAndRatio'"
      />
      <!-- 固定支出总额同比增长情况（各区年，各区月，各国年，各国月） -->
      <FixedExpensesAmountYoyGrow
        v-if="dialogInfo.componentName == 'FixedExpensesAmountYoyGrow'"
      />
      <!-- 固定支出总额环比增长对比（各区月，各国月） -->
      <FixedExpensesAmountQoq
        v-if="dialogInfo.componentName == 'FixedExpensesAmountQoq'"
      />
      <!-- 对比支出信息 -->
      <ContrastExpensesLaborCost
        v-if="dialogInfo.componentName == 'ContrastExpensesLaborCost'"
      />
      <ContrastExpensesLeaseCost
        v-if="dialogInfo.componentName == 'ContrastExpensesLeaseCost'"
      />
      <ContrastExpensesConsultingCost
        v-if="dialogInfo.componentName == 'ContrastExpensesConsultingCost'"
      />
      <ContrastExpensesPublicRelationsCost
        v-if="dialogInfo.componentName == 'ContrastExpensesPublicRelationsCost'"
      />
      <ContrastExpensesTrafficCost
        v-if="dialogInfo.componentName == 'ContrastExpensesTrafficCost'"
      />
      <CumulativeExpenseStart
        v-if="dialogInfo.componentName == 'CumulativeExpenseStart'"/>
    </div>
  </AnimationDialog>
</template>
